<template>
    <div class="product-detail-page section-padding">
        <div class="container mx-auto px-4">
            <div class="breadcrumbs mb-6">
                <router-link to="/">首页</router-link>
                <span class="mx-2">/</span>
                <router-link to="/product">产品展示</router-link>
                <span class="mx-2">/</span>
                <span>{{ product.name }}</span>
            </div>
            <h2 class="text-2xl md:text-3xl font-bold text-center mb-10 text-primary">产品展示详情</h2>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                <div class="bg-white rounded-lg shadow p-4">
                    <img :src="product.image" alt="产品图片" class="w-full h-auto rounded">
                </div>
                <div class="bg-white rounded-lg shadow p-6">
                    <h3 class="text-xl font-bold mb-4 text-gray-800">{{ product.name }}</h3>
                    <p class="text-gray-700 leading-relaxed mb-4">
                        {{ product.desc }}
                    </p>
                    <h4 class="text-lg font-bold mb-2 text-gray-800">产品介绍</h4>
                    <p class="text-gray-700 leading-relaxed mb-4">
                        {{ product.detail }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'GuestProductDetail',
    data() {
        return {
            product: {}
        }
    },
    created() {
        const productId = parseInt(this.$route.params.id);
        const productList = [
            {
                id: 1,
                name: 'Prometheus600科研无人机',
                image: 'https://picsum.photos/600/400?random=1',
                desc: 'P600系列第四代产品，深度融合Prometheus和SpireCV，具备超远距离目标检测与跟踪能力。',
                detail: 'Prometheus600科研无人机开发平台(简称P600)，是P600系列第四代产品，将两大开源项目Prometheus和SpireCV进行了深度融合，配合40倍变焦光电吊舱，实现超远距离目标检测与跟踪，支持不同高度下的自主降落；光电吊舱可兼作空中目标巡检，满足多场景监测需求；配合二维平面雷达，实现三维空间路径规划(EGO-Planner)，提升飞行自主性与安全性。'
            },
            {
                id: 2,
                name: '多旋翼无人机集群',
                image: 'https://picsum.photos/600/400?random=2',
                desc: '多台无人机协同作业，适用于大范围巡检、物流配送等场景。',
                detail: '多旋翼无人机集群系统由多台高性能无人机组成，具备智能协同控制算法，可实现大范围区域的同步巡检、物流配送任务。集群系统支持自主避障、任务分配和数据共享，大幅提升作业效率，适用于城市安防、农业普查等大规模场景。'
            },
            {
                id: 3,
                name: '工业级巡检无人机',
                image: 'https://picsum.photos/600/400?random=3',
                desc: '搭载高清摄像头和传感器，用于电力、管道等工业场景的智能巡检。',
                detail: '工业级巡检无人机专为复杂工业环境设计，配备高清变焦摄像头、红外热成像仪和多种传感器，可对电力线路、石油管道、风电设备等进行全方位检测。无人机具备抗风、防尘、防水性能，支持长续航和自主巡检路径规划，大幅降低人工巡检成本和安全风险。'
            },
            {
                id: 4,
                name: '消费级航拍无人机',
                image: 'https://picsum.photos/600/400?random=4',
                desc: '轻便易操作，具备4K高清拍摄和智能避障功能，适合航拍爱好者。',
                detail: '消费级航拍无人机采用折叠设计，便于携带，配备4K超高清摄像头和三轴云台，拍摄画面稳定流畅。无人机具备智能避障、一键成片、轨迹飞行等功能，操作简单易上手，是航拍爱好者和旅游博主的理想选择，让用户轻松记录精彩瞬间。'
            },
            {
                id: 5,
                name: '农业植保无人机',
                image: 'https://picsum.photos/600/400?random=5',
                desc: '高效喷洒农药，精准控制，助力现代农业智能化发展。',
                detail: '农业植保无人机专为农田作业设计，具备大载重、长续航能力，可高效喷洒农药、化肥和种子。无人机配备精准导航系统和流量控制系统，实现均匀喷洒，减少农药浪费和环境污染。同时支持地形跟随和仿地飞行，适应不同地形的农田作业，大幅提升农业生产效率。'
            },
            {
                id: 6,
                name: '警用安防无人机',
                image: 'https://picsum.photos/600/400?random=6',
                desc: '配备热成像和喊话装置，用于治安巡逻、应急救援等场景。',
                detail: '警用安防无人机集成热成像摄像头、强光探照灯和喊话装置，具备夜间巡逻、目标追踪和应急指挥功能。无人机支持实时图传和远程控制，可快速到达现场，为警方提供空中视角的情报支持，助力治安管理和应急救援工作，提升公共安全保障能力。'
            }
        ];
        this.product = productList.find(item => item.id === productId) || {};
    }
}
</script>

<style scoped>
.section-padding {
    padding: 2rem 0;
}

.breadcrumbs {
    font-size: 0.9rem;
    color: #666;
}

.breadcrumbs a {
    color: #666;
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: #014a95;
}
</style>